<template>
	<view>
		<view class="acea-row row-between row-middle header-bg">
			<view class="acea-row row-between row-middle account-con">
				<view class="con">
					<view class="text">账户余额(元)</view>
					<view class="num">6,086.18</view>
				</view>
				<view class="con">
					<view class="text">我的金币(个)</view>
					<view class="num">12500</view>
				</view>
			</view>
			<view class="acea-row footer">
				<view class="text">兑换金币</view>
				<view class="text">提现</view>
				<view class="text">购买金币</view>
			</view>
		</view>
		<view class="acea-row row-middle row-between module-box">
			<view class="acea-row row-middle row-center module-con">
				<image src="../static/images/account_01.png" mode=""></image>
				<view>余额明细</view>
			</view>
			<view class="acea-row row-middle row-center module-con">
				<image src="../static/images/account_02.png" mode=""></image>
				<view>金币明细</view>
			</view>
		</view>
		<view class="acea-row row-middle row-between type-list">
			<view class="type" :class="typeOn==index?'type-on':''" v-for="(item,index) in types" @click="typeOn=index">
				{{item}}
			</view>
		</view>
		<view class="list">
			<view class="acea-row row-middle row-between item" v-for="(item,index) in list" :key="index">
				<view class="acea-row row-middle item-l">
					<view class="pic-box">
						<image src="@/static/images/f.png" mode=""></image>
						<view class="gray-money small-text">你的账号</view>
					</view>
					<view class="info">
						<view class="type line2" v-if="index&2==0">消费返现金</view>
						<view class="type" v-else>支出</view>
						<view class="gray-money">兑换金币</view>
						<view class="gray-money small-text">2022/11/20 20:18</view>
					</view>
				</view>
				<view class="item-r">
					<view class="red-money" v-if="index&2==0">+50</view>
					<view class="black-money" v-else>-50</view>
					<view class="gray-money">余额:2330元</view>
				</view>
			</view>
		</view>
		<view class="uni-p-b-98">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				types:['全部','收入明细','消费明细'],
				typeOn:0,
				list:[1,1,1,1,1]
			};
		}
	}
</script>

<style lang="scss">
.header-bg{
	margin: 30rpx;
	height: 350rpx;
	border-radius: 20rpx;
	background: rgba(237, 33, 47, 1);
	position: relative;
	.footer{
		width: 100%;
		position: absolute;
		bottom: 0;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 0px 0px, 10px, 10px;
		background: rgba(222, 22, 35, 1);
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		.text{
			width: 32%;
			text-align: center;
		}
		.text:nth-child(2){
			position: relative;
			&::before{
				content: '';
				display: block;
				width: 1px;
				height: 28rpx;
				background: #ffffff;
				position: absolute;
				left: 0;
				top: 50%;
				margin-top: -14rpx;
			}
			&::after{
				content: '';
				display: block;
				width: 1px;
				height: 28rpx;
				background: #ffffff;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -14rpx;
			}
		}
	}
}
.account-con{
	width: 100%;
	position: absolute;
	top: 70rpx;
	.con{
		width: 50%;
		padding: 30rpx;
	}
	.text{
		font-size: 32rpx;
		font-weight: 400;
		line-height: 44rpx;
		color: rgba(255, 255, 255, 1);
	}
	.num{
		font-size: 60rpx;
		font-weight: 500;
		line-height: 68rpx;
		color: rgba(255, 255, 255, 1);
	}
	
}
.module-box{
	margin: 0 30rpx;
	height: 124rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 1);
	position: relative;
	&::before{
		content: '';
		display: block;
		width: 1px;
		height: 56rpx;
		background:  rgba(238, 238, 238, 1);
		position: absolute;
		right: 50%;
		top: 50%;
		margin-top: -28rpx;
	}
	.module-con{
		width: 50%;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
		image{
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}
	}
}
.type-list{
	padding: 30rpx;
	.type{
		padding: 0 50rpx;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 42rpx;
		color: rgba(0, 0, 0, 1);
	}
	.type-on{
		font-size: 32rpx;
		font-weight: 700;
		color: rgba(224, 22, 22, 1);
	}
}
.list{
	margin: 0 30rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 1);
	padding: 0 30rpx;
	.item~.item{
		border-top: 1px solid rgba(238, 238, 238, 1);    
	}
	.item{
		padding: 30rpx 0;
		.item-l{
			width: 78%;
		}
		.item-r{
			width: 22%;
			text-align: right;
		}
		.info{
			max-width: 50%;
			padding-left: 12rpx;
		}
		.gray-money{
			font-size: 24rpx;
			font-weight: 400;
			line-height: 36rpx;
			color: rgba(166, 166, 166, 1);
		}
		.red-money{
			font-size: 36rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: rgba(238, 33, 45, 1);
		}
		.black-money{
			font-size: 36rpx;
			font-weight: 500;
			line-height: 40rpx;
			color: rgba(0, 0, 0, 0.9);
		}
		.gray-money.small-text{
			font-size: 22rpx;
		}
		.pic-box{
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
			text-align: center;
		}
	}
}
</style>
